import { Message } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { defineStore } from 'pinia'
import { ref } from 'vue'
interface TagType {
  title: string
  path: string
}

const userTagsViewStore = defineStore(
  'tagsView',
  () => {
    // 声明数据  数据报错在tags标签页中的数据  数组[]
    //[{title:xxx,path:xxx},{}...]
    const tagsList = ref([] as TagType[])
    //   activeTab:代表激活高亮的显示的标签页
    const activeTab = ref('')
    // 添加标签页
    const add = (obj: TagType) => {
      // 添加时判断是否已经存在了
      const index = tagsList.value.findIndex((item) => {
        return obj.title === item.title
      })

      if (index !== -1) return
      tagsList.value.push(obj)
    }
    //   删除标签页
    const removeTab = (name: string) => {
      if (tagsList.value.length === 1) {
        return ElMessage.warning('至少保留一个标签页')
      }
      const index = tagsList.value.findIndex((item) => {
        return item.path == name
      })
      tagsList.value.splice(index, 1)

      if (activeTab.value == name) {
        activeTab.value = tagsList.value[index - 1].path
      }
    }
    // 清空页签
    const clearTags = () => {
      tagsList.value = []
      activeTab.value = ''
    }
    return {
      tagsList,
      activeTab,
      add,
      removeTab,
      clearTags,
    }
  },
  {
    persist: true,
  },
)
export default userTagsViewStore
